<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>proxy</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>proxy</h1>
	    <h2 id="title">111</h2>
	    <div id="descript">222</div>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	// 封装一下
    // 数据绑定，当某些数据改变时候同步更新dom
    class DomAutoFlush {
    	  constructor(data) {
    	  	this.data = new Proxy(data, {
    	  		set: function(target, property, value) {
 					// console.info('set property = ' , property, typeof property)

    	  			target[property] = value

    	  			// 更新DOM
    	  			let docObj = document.getElementById(property)
    	  			docObj && (docObj.innerHTML = target[property])
    	  			return true
    	  		}
    	  	})
    	  }

    	  setData(argData) {
    	  	for(let item in argData) {
    	  		let val = argData[item]
    	  		try {
					if(val != this.data[item]) {
	    	  			this.data[item] = val
	    	  		}
    	  		}catch(e) {
    	  			console.error(e)
    	  		}
    	  	}
    	  }
    }


    // 定义我们的数据
    let obj = new DomAutoFlush({
        title: '',
        descript: ''
    });

    console.log(obj)

     setInterval(function(){
     	obj.setData({
            title: new Date().toLocaleString(),
            descript: new Date().toLocaleTimeString(),
            aa : new Date()
        });
     }, 1000)
	</script>
</body>
</html>